<template>
  <div class="box">
    <van-sticky>
      <van-search
        v-model="keyword"
        placeholder="请输入搜索关键词"
        class="inp"
        @click="goto('/search')"
        z-index="1"
        disabled
      />
    </van-sticky>
    <div class="main">
      <van-sidebar v-model="activeKey" @change="onChange" class="siderbar">
        <van-sidebar-item
          v-for="(item, index) in title"
          :key="index"
          :title="item.title"
        />
      </van-sidebar>

      <van-list
        v-model="loading"
        :finished="finished"
        :offset="60"
        @load="loadMore"
        finished-text="------我是有底线的------"
        style="left: top"
      >
        <van-cell
          v-for="(item, index) in result"
          :key="index"
          is-link
          @click="gotoDetail(item.id)"
        >
          <template #icon>
            <van-image width="80" height="80" :src="item.mainImage" />
            <div class="info">
              <p class="van-multi-ellipsis--l2">{{ item.name }}</p>
              <p class="item_price">
                <span>￥{{ item.price / 100 }}</span>
                <span
                  >已售<b>{{ item.saleQuantity }}</b
                  >件</span
                >
              </p>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  name: "Classify",
  data() {
    return {
      title: [
        { id: 1, title: "电视" },
        { id: 2, title: "激光" },
        { id: 3, title: "空调" },
        { id: 4, title: "冰箱" },
        { id: 5, title: "洗衣机" },
        { id: 6, title: "冷柜" },
        { id: 7, title: "厨卫" },
        { id: 8, title: "手机" },
        { id: 9, title: "聚享家" },
      ],
      activeKey: 0,
      result: [],
      loading: false,
      finished: false,
      page: 1,
      keyword: "",
    };
  },
  watch: {
    keyword: function (n, o) {
      this.page = 1;
      this.result = [];
    },
    activeKey: function (n, o) {
      this.page = 1;
      this.result = [];
    },
  },
  activated() {
    this.$parent.showTabbar = true;
  },
  created() {
    this.loading = true;
    this.finished = false;
    console.log("title", this.title[0].title);
    let title = this.title[0].title;
    this.$request
      .post("goods/goodsall ", { category: title })
      .then(({ data }) => {
        this.result.push(...data.ret.data);
        this.loading = false;
        console.log(data);
        if (this.result.length >= data.ret.total) {
          this.finished = true;
        }
      });
  },
  methods: {
    loadMore() {
      console.log("load more");
      this.list();
    },
    onChange(index) {
      this.loading = true;
      this.finished = false;
      let title = this.title[index].title;
      console.log(title);
      localStorage.setItem("title", title);
      this.result = [];
      this.$request
        .post("goods/goodsall", {
          category: title,
          page: this.page,
        })
        .then(({ data }) => {
          this.result.push(...data.ret.data);
          this.loading = false;
          console.log(data);
          if (this.result.length >= data.ret.total) {
            this.finished = true;
          }
        });
    },
    list() {
      this.loading = true;
      let title = localStorage.getItem("title");
      this.$request
        .post("goods/goodsall", {
          category: title,
          page: this.page,
        })
        .then(({ data }) => {
          this.result.push(...data.ret.data);
          this.loading = false;
          console.log(data);
          if (this.result.length >= data.ret.total) {
            this.finished = true;
          }
        });
    },
    gotoDetail(id) {
      // this.$router.push('/goodsdetails/'+id)
      this.$router.push({
        name: "Goodsdetails",
        params: {
          id,
        },
      });
    },
    goto(url) {
      this.$router.push(url);
    },
  },
};
</script>
<style scoped>
.box {
  overflow-y: hidden;
}

.main {
  display: flex;
  margin-bottom: 50px;
}

.inp {
  border-bottom: 1px solid rgb(236, 227, 227);
}

.siderbar {
  border-right: 1px solid rgb(236, 227, 227);
}

.van-sidebar-item {
  padding-bottom: 12px !important;
}

.van-sidebar {
  height: 100% !important;
  width: 25% !important;
}

.van-list {
  width: 75% !important;
}

.info {
  width: 80%;
}

.info p {
  padding-left: 3px;
  font-size: 12px;
}

/* .item_name {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 150px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    } */

.item_price span:nth-child(1) {
  color: red;
  font-size: 14px;
  padding-right: 5px;
}

.item_price {
  display: flex;
  justify-content: space-between;
}
.item_price span:nth-child(2) b {
  color: rgb(202, 98, 98);
}
</style>